node服务端 html2img

起因：在最近的HaoYo项目中， 需要生成出分享海报；恰巧后端同学最近比较忙，没时间去做这块业务；俺就自告奋勇，使用Koa.js(node.js)来做这个功能。

众所周知， html生成img,其是通过浏览器本身获取到DOM结构转为canvas图层，继而生成可保存的图片，在node端既没有浏览器内核也没有canvas，这是唯一的问题。

一番努力google后，发现了这个仓库，使用超级简单；

node-html-to-image:https://github.com/frinyvonnick/node-html-to-image

安装：

npm install node-html-to-image
# or
yarn add node-html-to-image

使用：

const nodeHtmlToImage = require('node-html-to-image')

async function html2img() {
    await nodeHtmlToImage({
      output: './image.png',        // 输入图片地址及图片名称
      html: '<html><body>Hello world!</body></html>'        // html文件地址或html字符
    })
    console.log("生成图片完成")
}

问题：

在本地运行没一点问题， 部署到centeos服务器后，就出现莫名其妙的问题；一顿搜索后发现其原因是文章开头所说的， node-html-to-image是基于puppeteer的，在puppeteer的issue中有许多关于问题的解决办法；

常见问题及解决：

  1. 无法运行： 因为没有在Linux服务器上安装依赖环境；

    error: Error: Failed to launch the browser process!

    解决： 参考文档中的安装依赖： https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#chrome-headless-doesnt-launch-on-unix

    以centeos为例：

    yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 -y

  2. 字体无法正常显示

    将图片中用到的字体上传到服务器上即可， 以微软雅黑为例

    1. 复制windows本地的字体，字体在：C:\Windows\Fonts

    2. 在服务器新建文件夹：mkdir /usr/share/fonts/local

    3. 修改字体权限: chmod -R 777 /usr/share/fonts/local

    4. 建立字体缓存：

      (1)cd /usr/share/fonts/local

(2)mkfontscale

(3)mkfontdir

(4)fc-cache -fv

    5. 启动 xfs 字体服务器：/etc/init.d/xfs restart

    6. 查看已安装字体列表，判断是都安装成功：fc-list

字体部分参考：https://blog.csdn.net/weixin_29388659/article/details/116806713

可根据实际情况自行检索办法